<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>看拼音写汉字</title>
    <style type="text/css">
        body {
            margin: 0;
            background-color:#999999;
        }
    </style>
</head>
<body>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/minicomps.min.js"></script>
    <script src="../libs/pinyin_dict_all.js"></script>
    <script src="../libs/easeljs.js"></script>
    <script src="../libs/moonEaseljs.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script>
        
        //自然 成长 公路，公园，森林，海洋,河流，大海;大地.天空、月亮、星星、云彩、云朵、太阳
        const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,Image,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown,RadioButtonGroup} = mc
        const width = Stage.width;
        const height = Stage.height;
        var canvasW=794;
        var canvasH=1123;
        var canvasX=(width-canvasW)-50;
        var tians=[];
        var fonts=[];
        var moonjs = new MoonJs();
        var sound;
        let url='https://ywx620.gitee.io/learn/rec/sound/hanzi/$num.mp3';

        const parent=document.body;
        createjs.Ticker.framerate = 30;
        var canvas=new Canvas(parent,canvasX,0,canvasW,canvasH);
        var stage=new createjs.Stage(canvas);
        createjs.Ticker.addEventListener("tick",(e)=>{stage.update();});

        var layerBg=new createjs.Container();
        var layerMid=new createjs.Container();
        var layerContent=new createjs.Container();
        stage.addChild(layerBg);
        stage.addChild(layerMid);
        stage.addChild(layerContent);

        var midColor='#ffffff'

        function onClear(){
            layerBg.removeAllChildren();
            layerMid.removeAllChildren();
            layerContent.removeAllChildren();
            slider.value=0;
        }
        function createFonts(){
            layerContent.removeAllChildren();
            let type=RadioButtonGroup.getValueForGroup(group);
            let isShowPy=(type==names[0])
            let fonts=textArea.text;
            let signs=[' ','，','、','.',';','。'];
            for(let i=0;i<signs.length;i++){
                fonts=fonts.replaceAll(signs[i],',')
            }
            let allFonts;
            if(fonts.indexOf('\n')>0){
                allFonts=fonts.split('\n')
            }else{
                allFonts=[fonts];
            }
            let [y,x]=[50,5];
            for(let k=0;k<allFonts.length;k++){
                fonts=allFonts[k];
                fonts=fonts.split(',');
                let len=fonts.length;
                let cons=[];
                //console.log(fonts);
                let offxs=[20,20,20,12,6,0,0,0];
                let con;
                for(let i=0;i<len;i++){
                    let hzs=fonts[i];
                    con=new createjs.Container();
                    con.width=130;
                    con.height=60;
                    moonDrag(con);
                    cons.push(con);
                    layerContent.addChild(con);
                    for(let j=0;j<hzs.length;j++){
                        let hz=hzs[j];
                        let py=pinyin_dict_all[hz]||' ';
                        let pys=py.split(',');
                        if(pys.length>1) py=pys[0];
                        let x=j*100;
                        let txtPy=createFont(py,0,0,18,'#000','微软雅黑',true);
                        let txtHz=moonTian(55,55,'#000','#999');
                        isShowPy&&con.addChild(txtPy);
                        con.addChild(txtHz);
                        txtHz.x=20+j*(55+Number(ziLabel.input.text));
                        txtPy.x=txtHz.x+offxs[py.length];
                        txtHz.y=22;
                        txtPy.name=py;
                        txtPy.childs=pys;
                    }
                }
                let off=Number(ciLabel.input.text);
                Unify.displayRank(cons,5,off,0,x,y);
                //console.log(con.y,con.height)
                y=con.y+con.height+Number(hanLabel.input.text);
            }
            
        }
        function createFont(val,x,y,fontSize,fontColor,fontFamily='微软雅黑',hasClick=false){
            let txt = new createjs.Text(val, `${fontSize}px ${fontFamily}`, fontColor);
            if(hasClick) txt.addEventListener('click',onClick);
            [txt.x,txt.y]=[x,y];
            return txt;
        }
        function onClick(e){
            let t=e.target;
            let name=t.name;
            if(name==' ')return;
            if(t.childs&&t.childs.length>1){
                let n=t.childs.indexOf(t.name);
                n++;
                if(n==t.childs.length)n=0;
                let name=t.childs[n];
                t.text=name;
                t.name=name;
            }
            let u=url.replace('$num',name);
            if(sound){
                sound.setUrl(u);
            }else{
                sound=moonjs.createSound(u);
            }
        }
        //---------------
        var hasMid=true;
        var gapy=300;
        let [x,y]=[20,20];
        new Label(parent,x,y,'输入生字，以逗号隔开，两个两个一组，一行5组，如果是三个字以上，放在最后面，10个字后按回车');
        let textArea=new MoonTextArea(parent,x,y+=20,width-canvasW-100,gapy);
        new Button(parent,x,y+=gapy+5,'确定',createFonts);
        new Button(parent,x+110,y,'清空',onClear);
        new Button(parent,x+210,y,'班级名字',onClassName);
        new Label(parent,x,y+=30,'点击拼音可以修改多音字');
        let names=['显示拼音','不显示拼音'];
        const group=3;
        for(let i=0;i<names.length;i++){
            new RadioButton(parent, x+200+i*80, y+5,group,names[i],i==0);
        }

        let setName2s=[['场景宽度',794],['场景高度',1123]];
        let setInput2s=[];
        for(let i=0;i<setName2s.length;i++){
            let [name,value]=setName2s[i];
            y+=30;
            let label=new LabelInput(parent,x,y,name);
            label.input.text=value;
            setInput2s.push(label.input);
        }
        let hanLabel=new LabelInput(parent,x,y+=30,'行间距');hanLabel.input.setSize(50);
        let ziLabel=new LabelInput(parent,x+120,y,'字间距');ziLabel.input.setSize(50);
        let ciLabel=new LabelInput(parent,x+240,y,'词间距');ciLabel.input.setSize(50);
        hanLabel.input.text='90';
        ziLabel.input.text='10';
        ciLabel.input.text='25';
        new Button(parent,x,y+=30,'修改场景宽高',()=>{canvas.width=setInput2s[0].text;canvas.height=setInput2s[1].text;}).setSize(80);
        new Button(parent,x+80,y,'下载本页',()=>Unify.saveCanvas(canvas._canvas)).setSize(80);

        let slider=new HSlider(parent,x,y+=50,'修改背景的透明度',100,0,100,onSlider).setSize(160);
        layerMid.addChild(moonRect(canvas.width,canvas.height,'#FFFFFF'));//默认有白色背景

        new Label(parent,x,y+=50,'增加文字说明，可手动拖动');
        new Button(parent,x+150,y-2,'增加',addSm);
        let textAreaSm=new MoonTextArea(parent,x,y+=20,width-canvasW-100,50);
        textAreaSm.text=Unify.dateFormat('YYYY年M月D日',new Date)
        function addSm(e){
            let txt=createFont(textAreaSm.text,20,20,18,'#000');
            layerContent.addChild(txt);
            moonDrag(txt);
        }
        function onSlider(e){
            let value=slider.value;
            layerMid.removeAllChildren();
            let rect=new createjs.Shape();
            rect.graphics.f('#fff').dr(0,0,canvas.width,canvas.height);
            rect.alpha=value/100;
            layerMid.addChild(rect);
        }
        function onClassName(){
            var cn=createClassName();
            moonDrag(cn);
            layerContent.addChild(cn);
        }
        if(Unify.isMobile()){
            canvas.y=y+=85;
            canvas.x=0;
            textArea.setSize(300);
            textAreaSm.setSize(300);
            new Label(parent,350,200,'推荐使用电脑打开操作').setFontSize(50);
        }
    </script>
</body>

</html>